<template>
  <div class="hello">
    <header>
      <router-link tag='div' to='/search' class='f'>
        <img src="./home/shouye/f.jpg" alt="">
      </router-link>
        <ul>
          <router-link tag='li' to='/' exact>首页</router-link>
          <router-link tag='li' to='/classify' exact>分类</router-link>
          <router-link tag='li' to='/food' exact>食材</router-link>
          <router-link tag='li' to='/video' exact>视频</router-link>
        </ul>
        <router-link tag='div' to='/jia' class='j'>
          <img src="./home/shouye/fa.jpg" alt="">
          <p>发菜单</p>
        </router-link>
    </header>
    <section>
      <router-view></router-view>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: []
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
html,
body,
ul,
li,
div,
section,
p {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style-type: none;
}
.hello {
  display: flex;
  flex-direction: column;
  flex: 1;
  header {
    width: 100%;
    height: calc(153rem / 67.5);
    background: #ff6668;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    .f {
      width: 10%;
      height: calc(88rem / 67.5);
      text-align: center;
      line-height: calc(88rem / 67.5);
      img {
        width: 40%;
      }
    }
    ul li.active {
      font-size: calc(54rem / 67.5);
    }
    .j {
      width: 10%;
      height: calc(88rem / 67.5);
      text-align: center;
      position: relative;
      img {
        width: 40%;
      }
      p {
        position: absolute;
        top: 70%;
        left: 0;
        font-size: calc(39rem / 67.5);
      }
    }
    ul {
      width: 70%;
      height: calc(153rem / 67.5);
      display: -webkit-box;
      padding: 0 1rem;
      li {
        width: calc(1080rem / 25);
        -webkit-box-flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: calc(39rem / 67.5);
      }
      li:nth-child(1) {
        img {
          width: calc(65rem / 67.5);
          height: calc(65rem / 67.5);
        }
      }
      li:nth-child(6) {
        p {
          font-size: calc(36rem / 67.5);
          margin: 0;
          padding: 0;
        }
        img {
          width: calc(42rem / 67.5);
          height: calc(51rem / 67.5);
        }
      }
    }
  }
  section {
    width: 100%;
    height: calc((1080rem - 119rem) / 67.5);
    flex: 1;
    overflow: auto;
  }
}
</style>
